<template>
  <!-- 只对包含有效子菜单(类型为0)的项渲染为sub-menu -->
  <el-sub-menu
    v-if="hasValidChildMenu"
    :index="menu.id.toString()"
    class="custom-submenu"
  >
    <template #title>
      <component
        :is="iconComponent"
        v-if="iconComponent"
        class="icon"
      ></component>
      <span>{{ menu.menuName }}</span>
    </template>

    <!-- 只递归渲染有效子菜单 -->
    <menu-item
      v-for="subMenu in validChildMenus"
      :key="subMenu.id"
      :menu="subMenu"
    />
  </el-sub-menu>

  <!-- 没有有效子菜单且是菜单类型的情况 -->
  <el-menu-item 
    v-else-if="menu.type === '0'" 
    :index="menu.url"
  >
    <component
      :is="iconComponent"
      v-if="iconComponent"
      class="icon"
    ></component>
    <span>{{ menu.menuName }}</span>
  </el-menu-item>
</template>

<script setup>
import { computed } from "vue";
import {
  Camera,
  Delete,
  Edit,
  Tickets,
  CircleClose,
  DocumentDelete,
  Setting,
  Picture,
  Plus,
  Refresh,
  Menu,
  User,
  Folder,
  Upload,
  Help,
  Tools,
  Opportunity,
  Share,
  FolderOpened,
  Postcard,
  DocumentAdd,
  RefreshLeft,
  Promotion,
} from "@element-plus/icons-vue";

const props = defineProps({
  menu: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

// 筛选出有效的子菜单（类型为0的才是导航菜单）
const validChildMenus = computed(() => {
  if (!Array.isArray(props.menu.childMenu)) {
    return [];
  }
  // 只保留类型为菜单(type:0)的子项
  return props.menu.childMenu.filter(item => item.type === '0');
});

// 判断是否有有效的子菜单
const hasValidChildMenu = computed(() => {
  return validChildMenus.value.length > 0;
});

const iconComponents = {
  "el-icon-camera": Camera,
  "el-icon-delete": Delete,
  "el-icon-edit": Edit,
  "el-icon-tickets": Tickets,
  "el-icon-circle-close": CircleClose,
  "el-icon-document-delete": DocumentDelete,
  "el-icon-setting": Setting,
  "el-icon-picture": Picture,
  "el-icon-plus": Plus,
  "el-icon-refresh": Refresh,
  "el-icon-menu": Menu,
  "el-icon-user-solid": User,
  "el-icon-folder": Folder,
  "el-icon-upload": Upload,
  "el-icon-user": User,
  "el-icon-help": Help,
  "el-icon-s-tools": Tools,
  "el-icon-s-opportunity": Opportunity,
  "el-icon-share": Share,
  "el-icon-folder-opened": FolderOpened,
  "el-icon-postcard": Postcard,
  "el-icon-document-add": DocumentAdd,
  "el-icon-refresh-left": RefreshLeft,
  "el-icon-s-promotion": Promotion,
};

const iconComponent = computed(() => {
  return iconComponents[props.menu.icon] || null;
});
</script>

<style scoped>
.icon {
  margin-right: 8px;
  font-size: 16px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.el-sub-menu__title span,
.el-menu-item span {
  font-size: 14px;
  vertical-align: middle;
}

.el-sub-menu .el-menu {
  padding-left: 10px;
}

/* 强制隐藏无子菜单的箭头 - 最后的保障 */
.custom-submenu:not(.has-children) .el-sub-menu__icon-arrow {
  display: none !important;
}

</style>
